<template>
  <transition>
    <div
      ref="dragIcon"
      class="dragIcon"
      v-if="isShow"
      @click="onClick"
      @mouseenter="changeActive($event)"
      @mouseleave="removeActive($event)"
    >
      <img src="../../assets/images/hotMessage/box-ico.png" />
      <span style="fontWeight:bold; padding: 16px">素材中心</span>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      left: 0,
      top: 0,
      startToMove: false,
      isShow: true,
      timer: null,
      currentTop: null,
      clientW: document.body.clientWidth, //视口宽
      clientH: document.body.clientHeight, //视口高
    };
  },
  created() {
    this.left = this.clientW - this.itemWidth - 30;
    this.top = this.clientH / 2 - this.itemHeight / 2;
  },
  mounted() {
    this.bindScrollEvent();
    const that = this;
    window.onresize = () => {
      return (() => {
        that.clientW = document.body.clientWidth;
        that.clientH = document.body.clientHeight;
      })();
    };
  },
  watch: {
    clientW(newVal) {
      if (!this.timer) {
        this.clientW = newVal;
        this.left = this.clientW - this.itemWidth - 30;
        this.timer = true;
        let that = this;
        setTimeout(() => {
          that.timer = false;
        }, 400);
      }
    },
    clientH(newVal) {
      if (!this.timer) {
        this.clientW = newVal;
        this.top = this.clientH / 2 - this.itemHeight / 2;
        this.timer = true;
        let that = this;
        setTimeout(() => {
          that.timer = false;
        }, 400);
      }
    },
  },
  beforeDestroy() {
    // 记得销毁一些全局的的事件
    this.removeScrollEvent();
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    },
    changeActive($event) {
      $event.currentTarget.className = "dragIcon active";
    },
    removeActive($event) {
      $event.currentTarget.className = "dragIcon";
    },
    bindScrollEvent() {
      window.addEventListener("scroll", this.handleScrollStart);
    },
    removeScrollEvent() {
      window.removeEventListener("scroll", this.handleScrollStart);
    },
    handleScrollStart() {
      this.isShow = false;
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.handleScrollEnd();
      }, 300);
      this.currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    handleScrollEnd() {
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 判断是否停止滚动的条件
      if (this.scrollTop == this.currentTop) {
        this.isShow = true;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.dragIcon
  position fixed
  width 74px
  height 74px
  border-radius 50%
  background-color #ffffff
  box-shadow 0px 0px 28px rgba(105, 189, 229, 0.54)
  line-height 74px
  text-align center
  color #fff
  bottom 40px
  right 16px
  cursor pointer
  span
    display none
.active
  position fixed
  width 74px
  height 74px
  border-radius 50%
  background-color #ffffff
  line-height 74px
  text-align center
  color #fff
  bottom 40px
  right 16px
  cursor pointer
  img
    display none
  span
    position relative
    display block
    line-height 22px
    text-align center
    color #0e8eca
    font-size 18px
    font-weight 600px
.v-enter
  opacity 1
.v-leave-to
  opacity 0
.v-enter-active, .v-leave-active
  transition opacity 0.3s
</style>